<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>회원가입</title>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<style type="text/css">
	
	.ui-icon-red { width: 16px; height: 16px; background-image: url(/resources/img/ui-icons_cd0a0a_256x240.png); }
	.ui-icon-blue { width: 16px; height: 16px; background-image: url(/resources/img/ui-icons_2e83ff_256x240.png); }
	
	.f_frame{
		font-size: 0.76em;
		width: 550px;
		border-bottom: solid 1px;
		border-color:#EAEAEA;
		text-align:left;
		padding-bottom:6px;
		margin-bottom: 12px;
	}
	.f_title{
		width:80px;
		text-align:left;
	}
	input{
	height:20px;
	border: solid 1px;
	border-color:#b6b6b6;
	padding:0px;
	font-size:10pt;
	font-family:돋움;
	color:#494949;
	}
	#overlap{
	height:20px;
	border: solid 1px;
	border-color:#b6b6b6;
	padding:0px;
	font-size:10pt;
	font-family:돋움;
	color:red;
	}
</style>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	// 생년월일 추가
	for(var year=2014;year>1905;year--){
		$("#year").append("<option value="+year+">"+year+"</option>");
	}
	for(var month=1;month<13;month++){
		$("#month").append("<option value="+month+">"+month+"월</option>");
	}
	for(var day=1;day<32;day++){
		$("#day").append("<option value="+day+">"+day+"일</option>");
	}
	
	// 이름필드 스타일 정의
	$("#name").blur(function(){
		if($("#name").val() == ""){
			 $("#check_name").attr("class","form-group has-error");
		}else{
			 $("#check_name").attr("class","form-group has-success");
		}
	});
	
	// 휴대전화 스타일 정의
	$("#phone").blur(function(){
		if($("#phone").val() == ""){
			 $("#check_phone").attr("class","form-group has-error");
		}else{
			 $("#check_phone").attr("class","form-group has-success");
		}
	});
	
	// 아이디 중북확인
	$("#userid").keyup(function(){
		if($("#userid").val() == "")return false;
		if($("#userid").val().length < 4){
			$("#displayIdIcon").removeAttr("class");
			$("#displayIdMessage").html('<b><font color="B94A48">아이디는 4글자 이상부터 가능합니다</font></b>');
			return false;
		}
		var param = "userid="+$(this).val();
		$.ajax({
	  		  url: "/User/idCheck.do",
	  		  data: param,
	  		  type: 'get',
	  		  success: function(data){
	  			  if(data == "false"){
	  				  $("#displayIdMessage").html('<b><font color="B94A48">이미 사용중인 아이디 입니다.</font></b>');
	  				  $("#displayIdIcon").attr("class", "fa fa-times");
	  				  $("#displayIdIcon").attr("style", "color:#B94A48;");
	  				  $("#check_userid").attr("class","form-group has-error");
	  				  $("#userid").focus();
	  			  }else{
	  				  $("#displayIdMessage").html('<b><font color="468847">사용 가능한 아이디 입니다.</font></b>');
	  				  $("#displayIdIcon").attr("class", "fa fa-check");
	  				  $("#displayIdIcon").attr("style", "color:#468847;");
	  				  $("#check_userid").attr("class","form-group has-success");
	  			  }
	  		  }
	  	});
	});
});
	//이메일 유효성 검사
	function checkEmail(email){
		if(email.value == "")return false;
		eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
		if(eCheck.test(email.value)){
			$("#displayEmail").html("");
			$("#displayEmailIcon").removeAttr("class");
			$("#check_email").attr("class","form-group has-success");
		}else{
			$("#displayEmail").html("<b><font color='B94A48'>올바른 이메일 형식을 입력해 주세요</font><b>");
			$("#displayEmailIcon").attr("class", "fa fa-times");
			$("#displayEmailIcon").attr("style", "color:#B94A48;");
			$("#check_email").attr("class","form-group has-error");
			$("#email").focus();
		}
	}
	
	//비밀번호 확인
	function checkPw(){
		if($("#passwd").val() == "") return false;
		if($("#passwd").val() == $("#passwd2").val()){
			$("#displayPwMessage").html("<b><font color='468847'>비밀번호가 일치합니다.</font><b>");
			$("#displayPwIcon").attr("class", "fa fa-check");
			$("#displayPwIcon").attr("style", "color:#468847;");
			$("#check_passwd").attr("class","form-group has-success");
			$("#check_passwd2").attr("class","form-group has-success");
		}else{
			if($("#passwd2").val() == ""){
				return false;
			}
			$("#displayPwMessage").html("<b><font color='cd0a0a'>비밀번호가 틀립니다.</font><b>");
			$("#displayPwIcon").attr("class", "fa fa-times");
			$("#displayPwIcon").attr("style", "color:#B94A48;");
			$("#check_passwd2").attr("class","form-group has-error");
			
			$("#passwd2").focus();
		}
	}
	
	//숫자만 입력가능하도록
	function SetNum(obj){
	 val=obj.value;
	 obj.value=val.replace(/[^0-9]/gi,""); 
	}

	//회원가입 메소드
	function joinok(f) {
		
		if(confirm('입력하신 정보로 가입하시겠습니까?')){
			$("#birthday").val(f.year.value+"-"+f.month.value+"-"+f.day.value);
			alert($("#birthday").val());
			f.action = "User/createMember.do";
			f.submit();
		}else{
			return false;
		}
		
	}
	//우편번호 찾기 메소드
	function OpenAddressSearchWindow() {
	    var AddressSearchWindow = null;
	    if ( AddressSearchWindow != null )
	        AddressSearchWindow.close();
	    AddressSearchWindow = window.open( "zipcode/zipcode_search.do","AddressSearchWindow","width=450,height=400,scrollbars=yes,status=no" );
	}
	
	
</script>
</head>
<body>
<center>
<div style="width:600px;text-align:left;">
<h2 class="form-signin-heading">사용자 등록</h2>
<small>무료로 사용이 가능합니다</small>
</div>
<br><br>
<form action="/User/memberRegist.do" method="post" name="f" id="f" role="form">
<div class="well well-lg" style="width:600px;background-color:white;text-align:left;">
<div class="form-group" id="check_userid">
	<label for="userid" class="control-label">아이디</label>
	<input type="text" name="userid" id="userid" class="form-control" placeholder="아이디">
	<span id="displayIdIcon" style="display:inline-block"></span>
	<span id="displayIdMessage"></span>
</div>

<div class="form-group" id="check_passwd">
	<label for="passwd" class="control-label">비밀번호</label>
	<input type="password" name="passwd" id="passwd" onkeyup="checkPw();" class="form-control" placeholder="비밀번호">
</div>

<div class="form-group" id="check_passwd2">
	<label for="passwd2" class="control-label">비밀번호 확인</label>
	<input type="password" name="passwd2" id="passwd2" onkeyup="checkPw();" class="form-control" placeholder="비밀번호 확인">
	<span id="displayPwIcon" style="display:inline-block"></span>
	<span id="displayPwMessage"></span>
</div>

<div class="form-group" id="check_name">
	<label for="name" class="control-label">이름</label>
	<input type="text" name="name" id="name" class="form-control" placeholder="이름">
</div>

<div class="form-inline">
	<label for="birthday" class="control-label">생일</label>
	<input type="hidden" id="birthday" name="birthday">
	<select class="form-control" id="year" name="year" style="width:100px;"><option>연도</option></select>
	<select class="form-control" id="month" name="month" style="width:100px;"><option>월</option></select>
	<select class="form-control" id="day" name="day" style="width:100px;"><option>일</option></select>
</div>

<div class="form-group">
	<input name="gender" id="gender" type="radio" value="남" checked="checked">남성
	<input name="gender" id="gender" type="radio" value="여">여성
</div>

<div class="form-group" id="check_phone">
	<label for="phone" class="control-label">휴대전화</label>
	<input type="text" name="phone" id="phone" onkeyup="SetNum(this);" maxlength="11" class="form-control" placeholder="휴대전화">
</div>

<div class="form-group" id="check_email">
	<label for="email" class="control-label">이메일</label>
	<input type="text" name="email" id="email" onblur="checkEmail(this);" class="form-control" placeholder="이메일">
	<span id="displayEmailIcon" style="display:inline-block"></span>
	<span id="displayEmail"></span>
</div>

<!-- <div class="f_frame">
	질문답<br>
	<select name="qa1">
	<option value="1">내가 가장 사랑하는 사람은?</option>
	<option value="2">가장 좋아하는 음식은?</option>
	<option value="3">나의 보물 1호는?</option>
	<option value="4">내 단골 1호 술집은?</option>
	</select>
	<input type="text" name="qa2" id="qa2" style="width:160px;">
</div> -->

<center>
<button type="button" class="btn btn-success" style="margin-right:5px;" onclick="joinok(f);">
		<span class="fa fa-check"></span> 가입하기
</button>
<button type="button" class="btn btn-danger" style="margin-right:5px;" onclick="history.back();">
		<span class="fa fa-times"></span> 취소
</button>
</center>
</div>
</form>



<!-- <tr>
	<td width="100"><img src="images/join_form9.gif"></td>
	<td>
		<table border="0" cellspacing="0" cellpadding="0" id="zipst">
            <tr>
                <td>
                    <input class="input_default" type="text" size="3" id="zipcode1" name="zipcode1" readonly value=""></input>
                </td>
                <td>
                    &nbsp;-&nbsp;
                </td>
                <td>
                    <input class="input_default" type="text" size="3" id="zipcode2" name="zipcode2" readonly value=""></input>
                </td>
                <td class="td_default">
                    &nbsp;[<a class="a_default" href="javascript:OpenAddressSearchWindow();">우편번호</a>]
                </td>
            </tr>
        </table>
	</td>
</tr>
<tr>
	<td height="35"></td>
	<td>
 	<input class="input_default" type="text" size="50" maxlength="200" id="address1" name="address1" readonly value=""></input>
    </td>
</tr>
<tr>
	<td></td>
	<td>
<input class="input_default" type="text" size="50" maxlength="200" id="address2" name="address2" value=""></input>
	</td>
</tr>
<tr>
	<td height="25"></td><td class="fb2">나머지 주소를 입력해 주시기 바랍니다.</td>
</tr> -->
</center>
</body>
</html>